<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="文章列表" name="first">
                <el-tabs v-model="activeName1" @tab-click="handleClick">
                    <el-tab-pane label="常规" name="hhh">
                        <el-form>
                            <el-form-item label="模块标题：" label-width="82px">
                                <el-input v-model="active_component.propValue.name" clearable></el-input>
                            </el-form-item>
                            <!-- 富文本框 -->
                            <div class="quill-wrap">
                                <div style="border: 1px solid #ccc">
                                    <Toolbar
                                    style="border-bottom: 1px solid #ccc"
                                    :editor="editor"
                                    :default-config="toolbarConfig"
                                    :mode="mode"
                                    />
                                    <Editor
                                    v-model="active_component.propValue.content"
                                    style="height: 200px; overflow-y: hidden"
                                    :default-config="editorConfig"
                                    :mode="mode"
                                    @onCreated="onCreated"
                                    />
                                </div>
                            </div>
                            <el-collapse v-model="open">
                                <el-collapse-item title="模块样式" name="1">
                                    <el-form-item label-width="60px">
                                        <div class="flex-around jz_box">
                                            <div
                                                class="jz-photo-group"
                                                :class="active_component.propValue.tabIndex == 0 ? 'group_active' : ''"
                                                @click="changetab(0)"
                                                >
                                                <div class="jz_style_img_0 jz_style_img"></div>
                                            </div>
                                            <div
                                                class="jz-photo-group"
                                                :class="active_component.propValue.tabIndex == 1 ? 'group_active' : ''"
                                                @click="changetab(1)"
                                                >
                                                <div class="jz_style_img_1 jz_style_img"></div>
                                            </div>
                                            <div
                                                class="jz-photo-group"
                                                :class="active_component.propValue.tabIndex == 2 ? 'group_active' : ''"
                                                @click="changetab(2)"
                                                >
                                                <div class="jz_style_img_2 jz_style_img"></div>
                                            </div>
                                            <div
                                                class="jz-photo-group"
                                                :class="active_component.propValue.tabIndex == 3 ? 'group_active' : ''"
                                                @click="changetab(3)"
                                                >
                                                <div class="jz_style_img_3 jz_style_img"></div>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form v-if="active_component.propValue.tabIndex == 0">
                                        <el-form-item label="头条样式：">
                                            <el-radio-group v-model="active_component.propValue.HeadlineStyle">
                                                <el-radio :label="1">默认</el-radio>
                                                <el-radio :label="2">头条强调</el-radio>
                                            </el-radio-group>
                                           </el-form-item>
                                        <el-form-item label="排列方式：">
                                            <el-radio-group v-model="active_component.propValue.lineType">
                                                <el-radio :label="1">一列</el-radio>
                                                <el-radio :label="2">二列</el-radio>
                                                <el-radio :label="3">三列</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </el-form>

                                    <el-form v-else-if="active_component.propValue.tabIndex == 1">
                                        <el-form-item label="排列方式：">
                                            <el-radio-group v-model="active_component.propValue.lineType1">
                                                <el-radio :label="1">一列</el-radio>
                                                <el-radio :label="2">二列</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </el-form>
                                    <el-form v-else-if="active_component.propValue.tabIndex == 2">
                                        <el-form-item label="排列方式：">
                                            <el-radio-group v-model="active_component.propValue.lineType2">
                                                <el-radio :label="1">一列</el-radio>
                                                <el-radio :label="2">二列</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </el-form>
                                    <el-form v-else-if="active_component.propValue.tabIndex == 3">
                                        <el-form-item label="排列方式：">
                                            <el-radio-group v-model="active_component.propValue.lineType3">
                                                <el-radio :label="1">一列</el-radio>
                                                <el-radio :label="2">二列</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </el-form>
                                </el-collapse-item>
                            </el-collapse>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="高级" name="hh">配置管理</el-tab-pane>
                </el-tabs>
            </el-tab-pane>
            <el-tab-pane label="更换皮肤" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="样式设置" name="third">角色管理</el-tab-pane>
        </el-tabs>
        <div class="flex-center" style="margin-top:10px;">
            <el-button size="small" type="" @click="closeTK">取消</el-button>
            <el-button size="small" type="primary" @click="pushcanvas">确定</el-button>
        </div>
    </div>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import "@wangeditor/editor/dist/css/style.css";
export default {
    props: ["componentId", "componentList","activeCompont"],
    components: { Editor, Toolbar},
    data() {
        return {
            open: ['1'],
            activeName: "first",
            activeName1: "hhh",
            radio: '1',
            textarea: '',
            radio2: '1',
            active_component: {},
            activeNames: ['1'],
            editor: null,
            editorConfig: { placeholder: "请输入内容..." },
            mode: "default", // or 'simple',
            toolbarConfig: {
                excludeKeys: [
                "image", // 图片
                "video", // 视频
            ],
      },
        }
    },
    created() {
        if (this.activeCompont) {
            this.active_component =this.activeCompont
        }else {
            for (let key in this.componentList) {
                if (
                    this.componentList[key].isDialog &&
                    this.componentList[key].propValue.value == this.componentId
                ) {
                    this.active_component =JSON.parse(JSON.stringify(this.componentList[key]))
                }
            }
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
        },
        changetab(i) {
            console.log(i);
            this.show = i
            this.active_component.propValue.tabIndex = i;
        },
        closeTK(){
            this.$emit("closeTK")
        },
        pushcanvas() {
            //从list中筛选出对应的jsan
            //   for (let key in this.componentList) {
            //     if (
            //       this.componentList[key].isDialog &&
            //       this.componentList[key].propValue.value == this.componentId
            //     ) {
            //       console.log(this.componentList[key]); //获取到对应组件数据
                // 进行添加缓存/vuex
            //   let canvasData = JSON.parse(localStorage.getItem("canvasData"));
            if(this.activeCompont){
            //  this.$store.commit('setComponentData',this.$store.state.componentData)
                this.$emit("closeTK")//关闭弹框
            }else{
                let canvasStyle = this.$store.state.canvasStyleData;
                let component = this.active_component;
                component.style.top = Number(canvasStyle.height);
                component.style.left = 600;
                this.$store.commit("addComponent", { component: component });
                canvasStyle.height = String(
                Number(canvasStyle.height) + Number(component.style.height)
                );
                this.$store.commit("setCanvasStyle", canvasStyle);
                this.$emit("closeTK")//关闭弹框
            }
        },
        handleClick(tab, event) {
            console.log(tab, event)
        },
    }
};
</script>

<style lang="scss"scoped>

    /* 给模块样式加上边距 */
    .el-collapse {
        margin-top: 60px;
    }
    /* 让按钮靠右 */
    .btnRight {
        /* background: pink; */
        margin-top: 5px;
        /* margin-left: 512px;  25%*/
        /* margin-left: 386px; */
        margin-bottom: 5px;
        position: absolute;
        right: 0;
    }

    /* kuang */
.jz_box {
    width: 320px;
}
.jz-photo-group {
    width: 64px;
    height: 50px;
    cursor: pointer;
    border: 1px solid #aaa;
    .jz_style_img {
        width: 62px;
        height: 47px;
        background: url("../../assets/iconfont/mbg02.png") no-repeat;
    }
    .jz_style_img_0 {
        background-position: -574px -1px;
    }
    .jz_style_img_1 {
        background-position: -574px -140px;
    }
    .jz_style_img_2 {
        background-position: -574px -72px;
        // background: url(https://2.ss.faisys.com/image/v2/imageEffect_marquee.gif?v=202104251101);
    }
    .jz_style_img_3 {
        background-position: -574px -211px;
    }
}
.group_active {
    border: 1px solid #5874d8 !important;
    position: relative;
}
.group_active::after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 28px;
    height: 24px;
    background: url("../../assets/iconfont/component.png") no-repeat -197px -24px;
}
</style>

